<template>
  <div>
    <h1>当前求和为：{{ reuslt }}</h1>
    <h1>当前求和放大10倍：{{bigResult}}</h1>
    <h1>我叫{{user}},喜欢{{eat}}</h1>
    <el-select size="mini" v-model.number="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="add">+</el-button>
    <el-button @click="del">-</el-button>
    <el-button @click="addOdd">当前求和为奇数再加</el-button>
    <el-button @click="addDelay">等一等再加</el-button>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
    computed:{
    // 亲自写计算属性
      /*   reuslt(){
            return this.$store.state.reuslt
        },
        bigResult(){
            return this.$store.getters.bigResult
        },
        userName(){
            return this.$store.state.user
        },
        eat(){
            return this.$store.state.eat
        } */

       
        // 接收mapState生成计算属性，从state中读取数据（对象写法）
        // ...mapState({reuslt:"reuslt",user:'user',eat:'eat'}),
        // 接收mapState生成计算属性，从state中读取数据（数组写法）
        ...mapState(['reuslt','user','eat']),


        // 接收mapGetters生成计算属性，从getters中读取数据（对象写法）
        // ...mapGetters({bigResult:'bigResult'})
        // 接收mapGetters生成计算属性，从getters中读取数据（数组写法）
        ...mapGetters(['bigResult'])

    },
  data() {
    return {
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
      value: "",
    };
  },
  methods: {
    add() {
      this.$store.commit('ADD',Number(this.value))
    },
    del() {
     this.$store.commit('DEL',Number(this.value))
    },
    addOdd() {
      this.$store.dispatch('addOdd',Number(this.value))
    },
    addDelay() {
      this.$store.dispatch('addDelay',Number(this.value))
    },
  },
};
</script>
<style scoped>
.el-select-dropdown__item.hover /deep/,  .el-select-dropdown__item:hover /deep/{
    background-color: 	#FFFACD;
    color: #e6694a;
}
</style>